<template>
  <div class="test-guide">
    <div class="div-full" type="primary">
      <div class="center">
        温馨提示：
        <p id="first-ele1">第一</p>
        <p id="first-ele2">第二</p>
        <p id="first-ele3">第三</p>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.showTips();
  },
  methods: {
    showTips() {
      const driver = new Driver({
        prevBtnText: "上一步",
        nextBtnText: "下一步",
        doneBtnText: "我知道了",
        closeBtnText: "关闭",
        onReset: ele => {
          //Called when overlay is about to be cleared； 用户关闭了新手引导，此时需设置firstVisit，表明该用户已经访问过该网页(不是第一次访问），下次在同一台电脑上再打开该网页的时候，将不再显示新手引导（用户手动清除缓存的情况除外)
          localStorage.setItem(
            "firstVisit",
            JSON.stringify({ firstVisit: false })
          );
        }
      });
      const steps = [
        {
          element: "#first-ele1",
          popover: {
            title: "这是本站首页",
            description: "本站首页是一些展示性的信息",
            position: "top"
          }
        },
        {
          element: "#first-ele2",
          popover: {
            title: "这是帮助",
            description: "点此处可获取一些本站的相关说明",
            position: "top"
          }
        },
        {
          element: "#first-ele3",
          popover: {
            title: "联系我们",
            description: "点击这里可获取我们的相关信息",
            position: "top"
          }
        }
      ];
      driver.defineSteps(steps);
      driver.start();
    }
  }
};
</script>
<style lang="scss" scoped>
.test-guide {
  color: #ffa0a0;
}

.div-full {
  width: 100vw;
  height: 100vh;
}

.center {
  position: fixed;
  width: 30%;
  height: 30%;
  top: 50%;
  left: 50%;
}

::v-deep div#driver-highlighted-element-stage {
  border-radius: 50px !important;

}
</style>